﻿<UserControl x:Class="ZuneStyleApplication.Views.MainView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:views="clr-namespace:ZuneStyleApplication.Views"
             xmlns:viewModels="clr-namespace:ZuneStyleApplication.ViewModels"
             xmlns:apexCommands="clr-namespace:Apex.Commands;assembly=Apex"
             xmlns:apexControls="clr-namespace:Apex.Controls;assembly=Apex"
             xmlns:apexShells="clr-namespace:Apex.Shells;assembly=Apex"
             xmlns:apexConverters="clr-namespace:Apex.Converters;assembly=Apex"
             xmlns:ZuneStyleApplication="clr-namespace:ZuneStyleApplication" mc:Ignorable="d" 
             d:DesignHeight="400" d:DesignWidth="500">
    
    <!-- Set the view model. -->
    <UserControl.DataContext>
        <ZuneStyleApplication:MainViewModel x:Name="viewModel" />
    </UserControl.DataContext>
    
    <!-- The application host. An application host supports popups and drag and drop. -->
    <apexShells:Shell TextBlock.FontFamily="Segoe UI">        
        <Grid>
            
            <!-- Top right title panel. -->
            <apexControls:ApexGrid 
                Rows="*,*" Columns="*,Auto"
                HorizontalAlignment="Right" VerticalAlignment="Top"
                Width="200" Margin="0,0,90,0">
            
                <!-- The title. -->
                <TextBlock 
                    Grid.Row="0" FontWeight="ExtraBlack" FontSize="13" Text="{Binding Title, Converter={StaticResource StringCaseConverter}, ConverterParameter=Upper}"
                    Margin="0,2,4,0"
                    HorizontalAlignment="Right" />
            
                <!-- The subtitle. -->
                <TextBlock 
                    Grid.Row="1" FontWeight="ExtraBlack" FontSize="9"
                    Foreground="{StaticResource ZuneDarkGrayBrush}"
                    Margin="0,-2,4,0"
                    HorizontalAlignment="Right">
                    <Run Text="{Binding Title, Converter={StaticResource StringCaseConverter}, ConverterParameter=Upper}" />
                    <Run Text="SUBTITLE" />
                </TextBlock>

                <!-- The application icon. -->
                <Border 
                    Grid.Column="1" Grid.RowSpan="2" Width="36" Height="36"
                    Background="{StaticResource ZuneColor1Brush}" />
            
            </apexControls:ApexGrid>
        
            <!-- The top left menu panel. -->
            <apexControls:ApexGrid 
                Columns="Auto,*" 
                HorizontalAlignment="Stretch" VerticalAlignment="Top"
                Margin="0,30,0,0">
            
                <!-- The color block. -->
                <Border Grid.Column="0" Width="20" Height="54">
                    <Border.Background>
                        <LinearGradientBrush>
                            <GradientStop Offset="0" Color="{StaticResource ZuneColor1}" />
                            <GradientStop Offset="1" Color="{StaticResource ZuneColor2}" />
                        </LinearGradientBrush>
                    </Border.Background>
                </Border>
            
                <!-- The menu grid. -->
                <apexControls:ApexGrid Grid.Column="1" Rows="*,*" Margin="6,0,0,0">
                    
                    <!-- The top menu, show pages for the main page. -->
                    <apexControls:SelectableItemsControl 
                        x:Name="selectableItemsControl_TopMenu"
                        ItemsSource="{Binding Pages}"
                        SelectedItem="{Binding ActivePage}">
                        <apexControls:SelectableItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </apexControls:SelectableItemsControl.ItemsPanel>
                        <apexControls:SelectableItemsControl.ItemTemplate>
                            <DataTemplate>
                                <TextBlock 
                                    Cursor="Hand"
                                    Text="{Binding Title, Converter={StaticResource StringCaseConverter}, ConverterParameter=Lower}"
                                    Style="{StaticResource MenuItemStyle}" 
                                    apexCommands:ExtendedCommands.LeftClickCommand="{Binding ElementName=selectableItemsControl_TopMenu, Path=SelectItemCommand}"
                                    apexCommands:ExtendedCommands.LeftClickCommandParameter="{Binding}">
                                 </TextBlock>
                            </DataTemplate>
                        </apexControls:SelectableItemsControl.ItemTemplate>
                    </apexControls:SelectableItemsControl>
                    
                    <!-- The bottom menu, show pages for the active page. -->
                    <apexControls:SelectableItemsControl 
                        x:Name="selectableItemsControl_BottomMenu"
                        Grid.Row="1"
                        Margin="0,0,0,0"
                        ItemsSource="{Binding ActivePage.Pages}"
                        SelectedItem="{Binding ActivePage.ActivePage}">
                        <apexControls:SelectableItemsControl.ItemsPanel>
                            <ItemsPanelTemplate>
                                <StackPanel Orientation="Horizontal" />
                            </ItemsPanelTemplate>
                        </apexControls:SelectableItemsControl.ItemsPanel>
                        <apexControls:SelectableItemsControl.ItemTemplate>
                            <DataTemplate>
                                <TextBlock 
                                    Cursor="Hand"
                                    Text="{Binding Title, Converter={StaticResource StringCaseConverter}, ConverterParameter=Upper}"
                                    Style="{StaticResource SubMenuItemStyle}" 
                                    apexCommands:ExtendedCommands.LeftClickCommand="{Binding ElementName=selectableItemsControl_BottomMenu, Path=SelectItemCommand}"
                                    apexCommands:ExtendedCommands.LeftClickCommandParameter="{Binding}">
                                </TextBlock>
                            </DataTemplate>
                        </apexControls:SelectableItemsControl.ItemTemplate>
                    </apexControls:SelectableItemsControl>

                </apexControls:ApexGrid>
            </apexControls:ApexGrid>

            <!-- A View Broker for the main view. -->
            <apexControls:ViewBroker ViewModel="{Binding ActivePage.ActivePage}" Margin="6,94,6,6">
            </apexControls:ViewBroker>
        </Grid>

    </apexShells:Shell>
</UserControl>
